<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="900px"
    :close-on-click-modal="true"
    destroy-on-close
    top="15vh"
    class="car-detail-dialog"
  >
    <div v-loading="loading" class="car-detail-container">
      <template v-if="carDetail">
        <!-- 顶部区域：车辆主图和基本信息 -->
        <div class="top-section">
          <div class="car-image">
            <el-image
              v-if="
                carDetail.coverImage ||
                (carDetail.images && carDetail.images.length > 0)
              "
              :src="carDetail.coverImage || carDetail.images[0]"
              fit="cover"
              :preview-src-list="carDetail.images || [carDetail.coverImage]"
            />
            <div v-else class="no-image">暂无图片</div>
          </div>
          <div class="basic-info">
            <h2 class="car-title">
              {{ carDetail.brand }} {{ carDetail.model }}
            </h2>
            <div class="car-subtitle">
              <span>{{ carDetail.type || "轿车" }}</span>
              <el-divider direction="vertical" />
              <span>{{ carDetail.level || "标准型" }}</span>
              <el-divider direction="vertical" />
              <span>{{ carDetail.specifications?.seats || 5 }}座</span>
            </div>
            <el-divider />
            <div class="price-box">
              <span class="price"
                >¥{{ carDetail.dailyRate || carDetail.price || 0 }}</span
              >
              <span class="price-unit">元/天</span>
            </div>
            <div class="status-box">
              <el-tag
                :type="getStatusType(carDetail.status)"
                size="large"
                effect="plain"
              >
                {{ carDetail.status || "可租" }}
              </el-tag>
            </div>
            <div class="location-box">
              <i class="el-icon-location"></i>
              <span>所在城市：{{ carDetail.city || "-" }}</span>
            </div>
            <div class="location-detail" v-if="carDetail.location">
              <i class="el-icon-map-location"></i>
              <span>详细位置：{{ carDetail.location }}</span>
            </div>
          </div>
        </div>

        <!-- 车辆详细信息 -->
        <el-tabs type="border-card" class="info-tabs">
          <el-tab-pane label="基本信息">
            <div class="info-grid">
              <div class="info-item">
                <span class="label">车辆ID：</span>
                <span class="value">{{ carDetail._id || carDetail.id }}</span>
              </div>
              <div class="info-item">
                <span class="label">品牌：</span>
                <span class="value">{{ carDetail.brand || "-" }}</span>
              </div>
              <div class="info-item">
                <span class="label">型号：</span>
                <span class="value">{{ carDetail.model || "-" }}</span>
              </div>
              <div class="info-item">
                <span class="label">车型：</span>
                <span class="value">{{ carDetail.type || "-" }}</span>
              </div>
              <div class="info-item">
                <span class="label">级别：</span>
                <span class="value">{{ carDetail.level || "-" }}</span>
              </div>
              <div class="info-item">
                <span class="label">日租金：</span>
                <span class="value"
                  >{{ carDetail.dailyRate || carDetail.price || 0 }} 元/天</span
                >
              </div>
              <div class="info-item">
                <span class="label">返还城市：</span>
                <span class="value">
                  <template
                    v-if="
                      carDetail.returnCities &&
                      carDetail.returnCities.length > 0
                    "
                  >
                    <el-tag
                      v-for="(city, index) in carDetail.returnCities"
                      :key="index"
                      size="small"
                      effect="plain"
                      class="city-tag"
                    >
                      {{ city }}
                    </el-tag>
                  </template>
                  <template v-else>-</template>
                </span>
              </div>
              <div class="info-item">
                <span class="label">创建时间：</span>
                <span class="value">{{ formatDate(carDetail.createdAt) }}</span>
              </div>
              <div class="info-item">
                <span class="label">更新时间：</span>
                <span class="value">{{ formatDate(carDetail.updatedAt) }}</span>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="车辆规格" v-if="carDetail.specifications">
            <div class="info-grid">
              <div class="info-item" v-if="carDetail.specifications.length">
                <span class="label">车长：</span>
                <span class="value"
                  >{{ carDetail.specifications.length }} mm</span
                >
              </div>
              <div class="info-item" v-if="carDetail.specifications.width">
                <span class="label">车宽：</span>
                <span class="value"
                  >{{ carDetail.specifications.width }} mm</span
                >
              </div>
              <div class="info-item" v-if="carDetail.specifications.height">
                <span class="label">车高：</span>
                <span class="value"
                  >{{ carDetail.specifications.height }} mm</span
                >
              </div>
              <div class="info-item" v-if="carDetail.specifications.seats">
                <span class="label">座位数：</span>
                <span class="value"
                  >{{ carDetail.specifications.seats }} 座</span
                >
              </div>
              <div
                class="info-item"
                v-if="carDetail.specifications.trunkCapacity"
              >
                <span class="label">后备箱容量：</span>
                <span class="value"
                  >{{ carDetail.specifications.trunkCapacity }} L</span
                >
              </div>
              <div class="info-item" v-if="carDetail.specifications.powerType">
                <span class="label">动力类型：</span>
                <span class="value">{{
                  carDetail.specifications.powerType
                }}</span>
              </div>
              <div
                class="info-item"
                v-if="carDetail.specifications.fuelConsumption"
              >
                <span class="label">百公里油耗：</span>
                <span class="value"
                  >{{ carDetail.specifications.fuelConsumption }} L/100km</span
                >
              </div>
              <div class="info-item" v-if="carDetail.specifications.year">
                <span class="label">年份：</span>
                <span class="value">{{ carDetail.specifications.year }}</span>
              </div>
              <div class="info-item" v-if="carDetail.specifications.color">
                <span class="label">颜色：</span>
                <span class="value">{{ carDetail.specifications.color }}</span>
              </div>
              <div
                class="info-item"
                v-if="carDetail.specifications.transmission"
              >
                <span class="label">变速箱：</span>
                <span class="value">{{
                  carDetail.specifications.transmission
                }}</span>
              </div>
              <div class="info-item" v-if="carDetail.specifications.fuelType">
                <span class="label">燃油类型：</span>
                <span class="value">{{
                  carDetail.specifications.fuelType
                }}</span>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="使用记录" v-if="carDetail.rentalHistory">
            <div class="info-grid">
              <div class="info-item">
                <span class="label">租用次数：</span>
                <span class="value"
                  >{{ carDetail.rentalHistory.rentCount || 0 }} 次</span
                >
              </div>
              <div class="info-item">
                <span class="label">平均评分：</span>
                <span class="value">
                  <el-rate
                    v-model="carDetail.rentalHistory.averageRating"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  />
                </span>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane
            label="车辆图片"
            v-if="carDetail.images && carDetail.images.length > 0"
          >
            <div class="images-grid">
              <div
                v-for="(img, index) in carDetail.images"
                :key="index"
                class="image-item"
              >
                <el-image
                  :src="img"
                  fit="cover"
                  :preview-src-list="carDetail.images"
                  :initial-index="index"
                />
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="车辆描述" v-if="carDetail.description">
            <div class="description-section">
              <p>{{ carDetail.description }}</p>
            </div>
          </el-tab-pane>

          <el-tab-pane
            label="附加服务"
            v-if="
              carDetail.additionalServices &&
              carDetail.additionalServices.length > 0
            "
          >
            <div class="services-section">
              <el-tag
                v-for="(service, index) in carDetail.additionalServices"
                :key="index"
                class="service-tag"
                effect="plain"
              >
                {{ service.name || service }}
                <span v-if="service.price"> (¥{{ service.price }})</span>
              </el-tag>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>

      <!-- 无数据时的提示 -->
      <el-empty v-else description="暂无车辆详情数据" />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, reactive } from "vue";

export default defineComponent({
  name: "CarDetailDialog",
  props: {
    carId: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "车辆详情",
    },
  },
  emits: ["close", "error"],
  setup(props, { emit }) {
    const dialogVisible = ref(false);
    const loading = ref(false);
    const carDetail = ref(null);

    // 打开对话框并加载数据
    const openDialog = (id, customCarDetail) => {
      dialogVisible.value = true;

      // 如果直接传入车辆详情数据
      if (customCarDetail) {
        carDetail.value = customCarDetail;
        return;
      }

      // 如果传入ID，则需要请求API获取详情
      if (id) {
        loading.value = true;
        // 这里假设已经导入了carsApi
        import("@/http/cars.js").then((module) => {
          const carsApi = module.default;
          carsApi
            .getCar(id)
            .then((res) => {
              // 根据API文档，成功时 res.success 为 true，数据在 res.data
              if (res.success && res.data) {
                carDetail.value = res.data;
              } else {
                carDetail.value = null; // 清空旧数据
                emit("error", res.message || "获取车辆详情失败");
              }
            })
            .catch((err) => {
              carDetail.value = null; // 清空旧数据
              console.error("获取车辆详情失败", err);
              emit("error", err.message || "获取车辆详情失败");
            })
            .finally(() => {
              loading.value = false;
            });
        });
      }
    };

    // 关闭对话框
    const closeDialog = () => {
      dialogVisible.value = false;
      emit("close");
    };

    // 格式化日期
    const formatDate = (dateStr) => {
      if (!dateStr) return "-";
      const date = new Date(dateStr);
      return date.toLocaleString();
    };

    // 获取状态标签类型
    const getStatusType = (status) => {
      switch (status) {
        case "可租":
          return "success";
        case "已租":
          return "warning";
        case "维修中":
          return "danger";
        default:
          return "info";
      }
    };

    return {
      dialogVisible,
      loading,
      carDetail,
      openDialog,
      closeDialog,
      formatDate,
      getStatusType,
    };
  },
});
</script>

<style scoped>
.car-detail-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.car-detail-container {
  min-height: 300px;
}

/* 顶部区域样式 */
.top-section {
  display: flex;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.car-image {
  width: 300px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-right: 20px;
  flex-shrink: 0;
}

.car-image :deep(.el-image) {
  width: 100%;
  height: 100%;
}

.no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  color: #999;
}

.basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.car-title {
  font-size: 24px;
  margin: 0 0 10px 0;
  color: #303133;
}

.car-subtitle {
  color: #606266;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.price-box {
  margin: 10px 0;
}

.price {
  font-size: 28px;
  color: #f56c6c;
  font-weight: bold;
}

.price-unit {
  font-size: 14px;
  color: #909399;
  margin-left: 5px;
}

.status-box {
  margin: 10px 0;
}

.location-box,
.location-detail {
  margin: 5px 0;
  color: #606266;
  font-size: 14px;
}

/* 选项卡样式 */
.info-tabs {
  margin-bottom: 20px;
}

.info-tabs :deep(.el-tabs__content) {
  padding: 20px;
}

/* 信息网格样式 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
}

.label {
  font-weight: 600;
  min-width: 100px;
  color: #606266;
}

.value {
  color: #303133;
  flex: 1;
}

/* 图片展示样式 */
.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.image-item {
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.description-section {
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  line-height: 1.6;
}

/* 标签样式 */
.city-tag,
.service-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

/* 服务部分样式 */
.services-section {
  display: flex;
  flex-wrap: wrap;
}

.dialog-footer {
  text-align: right;
  padding: 10px 20px;
}
</style> 